<template>
  <div class="friendAndMessageList">
    <span class="FMTitle">Chat</span>
    <span class="subTitle">{{ subTitle }}</span>

    <div style="height: 560px; overflow: auto">
      <div v-for="(item, index) in dataList" :key="item">
        <div class="friendInfo" @click="clickHandler(item, index)">
          <div class="AvatarBox">
            <el-image :src="item.image" class="friendAvatar"></el-image>
          </div>
          <div class="friendContent">
            <div class="username2" v-if="type === 0">{{ item.name }}</div>
            <div class="username" v-if="type === 1">{{ item.noteType }}</div>
            <div class="content" v-if="type === 1">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["subTitle", "dataList", "type"],

  methods: {
    clickHandler(data, index){
      this.$parent.handlerListClick(data, index);
    }
  },
};
</script>

<style scoped>
.friendAndMessageList {
  width: 26.8%;
  margin-left: 0.1%;
  margin-right: 0.1%;
  background-color: #f3f2ef;
  display: flex;
  flex-direction: column;
}

.FMTitle {
  color: #21aa93;
  font-weight: bold;
  font-size: 26px;
  margin-right: 70%;
  margin-top: 6%;
  font-family: "STZhongsong";
}

.subTitle {
  margin-right: 52%;
  margin-top: 4%;
  margin-bottom: 2%;
  font-size: 14px;
  color: #626569;
}

.friendInfo {
  background-color: #fff;
  border-radius: 0.25rem;
  width: 85%;
  height: 75px;
  margin-left: 7%;
  margin-bottom: 1.5%;
  display: flex;
  flex-direction: row;
}
.friendInfo:hover {
  border: 1px solid #21aa93;
  cursor: pointer;
}

.AvatarBox {
  width: 25%;
}

.friendAvatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-top: 15%;
}

.friendContent {
  display: flex;
  flex-direction: column;
}

.username {
  margin: auto;
  margin-bottom: 0%;
  margin-left: 0%;
  font-size: 16px;
  font-weight: 600;
  color: #555555;
}

.username2 {
  margin: auto;
  margin-top: 25px;
  margin-left: 0%;
  font-size: 16px;
  font-weight: 600;
  color: #555555;
}

.content {
  margin: auto;
  margin-top: 0%;
  margin-left: 0%;
  font-size: 13px;
  color: #626569;
}
</style>
